<template>
  <div class="publish-media">
    <component :is="child"></component>
  </div>
</template>

<script>
import Before from './videoUpload/before.vue';
import After from './videoUpload/afterVideoUploaded.vue';

export default {
  name: 'video',
  components:{
    "before-media-publish":Before,
    "after-video-uploaded":After
  },
  computed: {
    child() {
      return this.$store.getters.publishMediaChild;
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm => {
      if (vm.$store.state.user.status !== 1) {
        vm.$router.push('/columns')
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    try {
      if (this.$store.getters.hasTempVideoDate) {
        this.$store.dispatch('confirm', '您已输入的内容将会丢失，是否确定？').then(()=> {
          try {
            this.$store.state.publishMedia.request.abort();
          }
          catch (e) {
          }
          this.$store.dispatch('mediaClearTempData');
          next();
        }, ()=> {})
      }
      else if(this.$store.state.publishMedia.status==='uploading'){
        this.$store.dispatch('confirm', '您正在上传视频，确定要离开么？').then(()=> {
          try {
            this.$store.state.publishMedia.request.abort();
          }
          catch (e) {
          }
          this.$store.dispatch('mediaClearTempData');
          next();
        }, ()=> {})
      }
      else {
        try {
          this.$store.state.publishMedia.request.abort();
        }
        catch (e) {
        }
        this.$store.dispatch('mediaClearTempData');
        next();
      }
    }
    catch (e) {
      next();
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
.publish-media {
  .hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}

.after-video-uploaded {
  .type-info {
    color: #999;
    font-size: 12px;
  }
  .type-switch {
    margin-top: 14px;
    display: inline-block;
    font-size: 0;
    letter-spacing: 0;
    height: 29px;
    border-radius: 5px;
    overflow: hidden;
    span {
      cursor: pointer;
      user-select: none;
      letter-spacing: normal;
      display: inline-block;
      text-align: center;
      line-height: 29px;
      background: #f0f0f0;
      width: 60px;
      height: 100%;
      font-size: 12px;
      color: #999;
      &.chosen {
        background: #2e9057;
        color: #fff;
      }
    }
  }
  .common-form {
    width: 564px;
    margin: auto;
    margin-top: 40px;
  }
  .top {
    padding-bottom: 34px;
    border-bottom: 1px solid #e7e7e7;
  }
  .file-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
  }
  .progress {
    width: 918px;
    float: left;
    span {
      float: right;
      font-size: 12px;
      color: #666;
      margin-top: 7px;
    }
  }
  .cancel {
    float: left;
    margin-left: 10px;
    position: relative;
    top: -2px;
    cursor: pointer;
    width: 12px;
    height: 13px;
    background: url(../../../../assets/cancel.png) center center no-repeat;
  }
  .video-upload-form {
    height: 39px;
    padding-left: 50px;
    background: left center no-repeat;
    line-height: 39px;
    &.uploaded {
      background-image: url(../../../../assets/upload_finish.png);
      .status {
        color: #60a431;
      }
    }
    &.standby {
      background-image: url(../../../../assets/upload_standby.png);
      .status {
        color: #53a0c5;
      }
    }
    &.error {
      background-image: url(../../../../assets/upload_error.png);
      .status {
        color: #e6262f;
      }
    }
  }


  .reupload {
    display: inline-block;
    position: relative;
    color: #4a9bac;
    text-decoration: underline;
    cursor: pointer;
  }
}
</style>
